<!DOCTYPE html>
<html class="pixel-ratio-3 retina android android-5 android-5-1-1">
<head>
    <title> 认 证 </title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="">

    <link rel="stylesheet" href="/lib/weui.min.css">
    <link rel="stylesheet" href="/css/jquery-weui.css">
    <link rel="stylesheet" href="/css/home.css">

   <!-- <link rel="stylesheet" href="/plugins/cropper/cropper.css">-->
    <link rel="stylesheet" href="/plugins/cropper/js/cropper/cropper.css">
<style>

    input::-webkit-input-placeholder{
        color: #999;
        text-size:0.8rem
    }
    input::-moz-placeholder{
        color: #999;
        text-size:0.8rem
    }
    input:-moz-placeholder{
        color: #999;
        text-size:0.8rem
    }
    .upload-zone{padding:0.6rem;color: grey;position: relative}
    p{color:#999}
    .item_block{
        width:4rem;height: 4rem;border:lightgray dashed 0.03rem; border-radius: 3%;margin-top: 0.3rem ;
        text-align: center;font-size: 0.6rem;color: grey;display:table-caption;
    }
    .item_block span{display: block;}
    .item_block p{padding:0.3rem}
    .img-tip{position: absolute;bottom: 0rem; background-color: rgba(0,0,0,.5);width: 100%;color: white;text-align: center}

    .inner-img img{ width: 100%; height: 100%}
    .weui-panel__hd h3{ color: #413f3f}
    .weui-check__label {
        display: -webkit-inline-box;
    }
    .weui-uploader__bd{padding:0.5rem}
    .weui-input,.weui-textarea{font-size:0.8rem}
    .cropper-preview,.cropper-image{height:15.0rem!important;max-height:15.0rem!important; }
    .weui-gallery__opr a{width:50%;display: inline-block}
    .page{margin: 0px;padding:0px;display: none}
    .active{display: block}
</style>
</head>
<body ontouchstart>
<form action="/d/doctor/uploadSertificate" method="post" enctype="multipart/form-data" id="dataForm">
<input name="doctorId" type="hidden" id="doctorId"/>
<div class="page active">
<div class="weui-panel weui-panel_access">
    <div class="weui-panel__hd"><h3><i class="fa fa-user-circle-o" aria-hidden="true"></i> 真实头像</h3>提交后再次修改需要重新认证，请认真填写</div>
    <div class="weui-cell__bd">
        <div class="weui-uploader">
            <div class="weui-uploader__bd">
                <div   id="imgChoose">
                    <div class="weui-uploader__files" style="background-image:url('/mod-page/images/wechat/avatar-demo.png');position:relative"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="weui-panel weui-panel_access" style="margin-top: 0.4rem">
<div class="weui-panel__hd"><h3><i class="fa fa-id-card" aria-hidden="true"></i>  真实姓名</h3>提交后再次修改需要重新认证，请认真填写</div>
<div class="weui-panel__bd">
    <div class="weui-cell ">
        <div class="weui-cell__bd">
            <input class="weui-input"  name="doctorname" placeholder="姓名">
        </div>
    </div>
</div>
</div>
<div class="weui-panel weui-panel_access" style="margin-top: 0.4rem">
 <div class="weui-panel__hd"><h3><i class="fa fa-mars-double" aria-hidden="true"></i> 性别</h3></div>
<div class=" weui-cells_checkbox">
    <label class="weui-cell weui-check__label" for="s11">
        <div class="weui-cell__hd">
            <input type="radio" value="男" class="weui-check" name="sex" id="s11" checked="checked">
            <i class="weui-icon-checked"></i>
        </div>
        <div class="weui-cell__bd">
            <p style="font-size:0.8rem">男</p>
        </div>
    </label>
    <label class="weui-cell weui-check__label" for="s12">
        <div class="weui-cell__hd">
            <input type="radio" value="女" name="sex" class="weui-check" id="s12">
            <i class="weui-icon-checked"></i>
        </div>
        <div class="weui-cell__bd">
            <p style="font-size:0.8rem">女</p>
        </div>
    </label>

</div>

<div class="weui-panel weui-panel_access" style="margin-top: 0.4rem">
        <div class="weui-panel__hd"><h3><i class="fa fa-briefcase" aria-hidden="true"></i> 简介</h3></div>
    <div class="weui-panel__bd">
        <div class="weui-cell ">
            <div class="weui-cell__bd">
                <textarea class="weui-textarea" name="introduction" placeholder="填写简介"></textarea>
            </div>
        </div>
    </div>
</div>

    <div class="weui-panel weui-panel_access" style="margin-top: 0.4rem">
        <div class="weui-panel__hd"><h3><i class="fa fa-hand-peace-o" aria-hidden="true"></i> 擅长</h3></div>
        <div class="weui-panel__bd">
            <div class="weui-cell ">
                <div class="weui-cell__bd">
                    <textarea class="weui-textarea" name="specialty" placeholder="填写擅长内容"></textarea>
                </div>
            </div>
        </div>
    </div>

<div class="weui-btn-area" style="margin-bottom: 2rem">
    <a class="weui-btn weui-btn_primary" href="javascript:" onclick="nextStep()"> 下一步 </a>
</div>
</div>

<div class="weui-gallery" >
    <span class="weui-gallery__img" id="cutContainer">
       <div class="cropper-preview">
        </div>
        <div id="result"></div>
    </span>
    <div class="weui-gallery__opr">
        <a href="javascript:;" class="backtomain" >
            <span>返回重选</span>
        </a>
        <a href="javascript:;" class="weui-gallery__del btn-cropper" >
            <span>完成</span>
        </a>
    </div>
</div>
</div>

<div class="page">
    <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
            <div class="weui-cell__hd"><label  class="weui-label">地区</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="start" name="address" type="text"  placeholder="请选择您所在的地区">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">机构</label></div>
            <div class="weui-cell__bd">
                <select class="weui-select"  name="medicalInstitution.medicalId" id="sel_medical">
                </select>
            </div>
        </div>
    </div>

    <div class="weui-cells weui-cells_form" style="padding-bottom: 2rem">
        <div style="display: block;text-align: center">
            <p style="margin:0.5rem 0rem;">请上传手持身份证照片</p>
            <div style="width:100%">
                <img src="/mod-page/images/wechat/id-demo.jpg" width="80%" style="border-radius: 3%">
            </div>
            <div  id="idImgChoose">

            </div>
        </div>
    </div>

    <div class="weui-cells weui-cells_form" style="padding-bottom: 2rem">
        <a class="weui-btn weui-btn_default" href="javascript:" style="line-height:2;width:90%" id="preStep"> 上一步  </a>
        <a class="weui-btn weui-btn_primary" href="javascript:" style="line-height:2;width:90%" id="btnSave"> 提交数据 </a>
    </div>

</div>
</form>
<script src="/lib/jquery-2.1.4.js"></script>
<script src="/js/jquery.form.js"></script>
<script src="/lib/fastclick.js"></script>
<script src="/js/jquery-weui.js"></script>


<script type="text/javascript" src="/plugins/cropper/js/lrz.all.bundle.js"></script>
<script type="text/javascript" src="/plugins/cropper/js/cropper/cropper.min.js"></script>
<script type="text/javascript" src="/js/city-picker.js" charset="utf-8"></script>



<script src="/js/home.js"></script>
<script>
    var doctorId = getQueryString("doctorId");
    $(document).ready(function(){
        //图片上传
        $("#imgChoose").h5upload({
            exts: ['jpg', 'gif', 'png', 'jpeg'],
            max: 1,
            size: 10145728,
            del: true,
            cut:true,
            name: 'avatar' //input name
        });

        $("#idImgChoose").h5upload({
            exts: ['jpg', 'gif', 'png', 'jpeg'],
            max: 1,
            size: 10145728,
            del: true,
            restric:false,
            name: 'idImage' //input name
        });


        $(".backtomain").click(function(){
            $('#cutContainer').find('.cropper-preview').empty();
            $(".weui-gallery").hide();
        });
        $("#a_upload_avatar").on("click",uploadAvatar);

        $("#start").cityPicker({
            title: "选择所在地",
            onChange: function (picker, values, displayValues) {

            }
        });

        $("#preStep").on("click",function(){
            prePage();
        });

        $("#btnSave").on("click",function(){
           submitData();
        });
        loadMedicalInstitution();

        $("#doctorId").val(doctorId);
    });

    var pageIndex = 0 ;
    function nextPage(){
        $(".page:eq("+pageIndex+")").removeClass("active").slideUp("slow");
        $(".page:eq("+(pageIndex+1)+")").addClass("active").slideDown("slow");
        pageIndex++;
    }

    function prePage(){
        $(".page:eq("+pageIndex+")").removeClass("active").slideUp("slow");
        $(".page:eq("+(pageIndex-1)+")").addClass("active").slideDown("slow");
        pageIndex--;
    }

    function uploadAvatar(){
        var cavs  = cropper.getCroppedCanvas();
    }

    function nextStep(){
        nextPage();
    }

    function loadMedicalInstitution(){
        $.ajax({
            url:"/d/medicalinsitution/loadMedicalinsitution",
            success:function(da){
                var  ops ="<option value=''>请选择</option>";
                $(da.data).each(function(){
                    ops+="<option value='"+this.medicalId+"'>"+this.medicalname+"</option>";
                });
                $("#sel_medical").html(ops);
            }
        });
    }

    function submitData(){
       var  headImg = $("input[name='avatar']").val();
       var  idImage = $("input[name='idImage']").val();

       if(headImg == ""){
            $.toast("请上传头像","forbidden");
            return ;
       }
        if(idImage == ""){
            $.toast("请上传身份证","forbidden");
            return ;
        }

       $("#dataForm").ajaxSubmit({
            beforeSend:function(){
                enableOrDisableBtn($("#btnSave"),false);
            },
            success:function(da){
                if(da.msg =="ok"){
                    location.href="/mod-page/studio/doctor_certificate_msg.html?doctorId="+doctorId;
                    enableOrDisableBtn($("#btnSave"),true);
                }else{
                    $.toast("保存失败！")
                }
            }
        });
      /*  location.href="/mod-page/studio/doctor_certificate_msg.html?doctorId="+doctorId;
        localStorage.setItem("va","1");*/
    }
</script>
</body>
</html>